<template>
  <div class="footer">
    <div class="l">
      <div class="l_tent">
        <img
          style="width: 80%"
          src="../../../assets/images/融信川logo.png"
          alt=""
        />
        <div style="color: #ccc">
          公司地址：北京市东城区和平里东街11号3号楼五层5-H1号
        </div>
        <div class="beian" style="color: #ccc;padding: 5px 0;" >
          <img style="width: 20px;height: 22px;margin-right: 8px;" src="../../../assets/images/beianhao.png" alt="">
          <el-link target="_blank" type="info" style="font-size: 16px;" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102007288">京公网安备11010102007288号</el-link>
        </div>
        <div class="beian" style="color: #ccc">
          备案号：<el-link target="_blank" type="info" style="font-size: 16px;" href="https://beian.miit.gov.cn">京ICP备2024082564号-2</el-link>
        </div>
      </div>
      <div class="l_tent1">
        <img
          style="width: 60px; padding-right: 5px;"
          src="../../../assets/images/download.png"
          alt=""
        />
        <div>
          <div style="color: #ccc;">联系电话：</div>
          <div style="color: #fff; font-weight: 700; font-size: 46px;">13691154592</div>
        </div>
      </div>
    </div>
    <div class="r"></div>
  </div>
</template>

<script>
import { getFooterData } from "@/api/index";

export default {
  name: "Footer",

  data() {
    return {
      footerData: {
        phone: "123-456-7890",
        email: "example@example.com",
        address: "默认地址",
        weChatImage: "default-wechat-image.png",
        icp: "默认ICP",
        beianImage: "default-beian-image.png",
        publicSecurity: "默认公安信息",
        copyright: "© 2023 默认版权",
      },
    };
  },

  mounted() {
    // 获取缓存的数据
    const cachedFooterData = localStorage.getItem("footerData");
    // 如果有缓存的数据，则使用缓存的数据
    if (cachedFooterData) {
      this.footerData = JSON.parse(cachedFooterData);
    } else {
      this.fetchFooterData();
    }
  },

  methods: {
    // 获取Footer数据
    async fetchFooterData() {
      try {
        // 获取Footer数据
        const response = await getFooterData();
        // 如果请求成功，且数据不为空，则更新数据
        if (response.code === 0 && response.data.length > 0) {
          this.footerData = response.data[0];
          // 将数据缓存到localStorage
          localStorage.setItem("footerData", JSON.stringify(this.footerData));
        } else {
          console.error("Failed to fetch footer data:", response.message);
        }
      } catch (error) {
        console.error("Failed to fetch footer data:", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  background: #242f41 bottom;
  padding: 80px;
  .l {
    display: flex;
    justify-content: center;
    .l_tent {
      width: 500px;
      padding-right: 70px;
      border-right: 1px solid hsla(0, 0%, 100%, 0.1);
    }
    .l_tent1 {
      padding: 30px;
      width: 500px;
      display: flex;
      align-items: center;
    }
  }
}
.beian{
  display: flex;
}
</style>